<script>
// import api from "api";
// import instance from "@/api/axios";
import {getCourseListNew} from "@/api/http";

export default {
  name: "axiosPage",
  data() {
    return {
      picList: [],
      freeList: [],
      boutiqueList: [],
      courseParams:{
        type: 'boutique',
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  methods: {
    /*getCourseList(type) {
      // return api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
      //   type,
      //   pageNum: 1,
      //   pageSize: 5
      // }, {
      //   headers: {
      //     'content-type': "application/x-www-form-urlencoded"
      //   }
      // })
      return instance.post('/weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5
      })
    },*/
    getCourseListNew1() {
      getCourseListNew(this.courseParams).then(res => {
        console.log(res, '课程')
        if (res.code === 0) {
          this.boutiqueList = res.rows
        }
      })
    }
  },
  created() {
    // 9种请求方式、常见状态码 CSDN
    // console.dir(api)
    // 地址：协议(http https)+主机（域名 ip（公网 私网））+端口+路径+参数（?拼接  &参数1=参数1值）
    // api.get('地址')
    // console.log(api.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5'))//promise对象
    /*api.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5').then(res => {
      console.log(res, 'res')
      this.picList = res.data.data
    }).catch(err => {
      console.log(err)
    }).finally(com => {
      console.log(com)
    })*/
    //   post请求
    // api.post('路径',data,配置)
    // 免费课程
    /*api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
      type: 'free',
      pageNum: 1,
      pageSize: 5
    }, {
      headers: {
        'content-type': "application/x-www-form-urlencoded"
      }
    }).then(res => {
      console.log(res, '课程')
      if (res.data.code === 0) {
        this.freeList = res.data.rows
      }
    })*/
    // this.getCourseList('free').then(res => {
    //   console.log(res, '课程')
    //   if (res.data.code === 0) {
    //     this.freeList = res.data.rows
    //   }
    // })
    /* this.getCourseList('free').then(res => {
       console.log(res, '课程')
       if (res.code === 0) {
         this.freeList = res.rows
       }
     })*/
    // 精品课程
    /*api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
      type: 'boutique',
      pageNum: 2,
      pageSize: 5
    }, {
      headers: {
        'content-type': "application/x-www-form-urlencoded"
      }
    }).then(res => {
      console.log(res, '课程')
      if (res.data.code === 0) {
        this.boutiqueList = res.data.rows
      }
    })*/
    // this.getCourseList('boutique').then(res => {
    //   console.log(res, '课程')
    //   if (res.data.code === 0) {
    //     this.boutiqueList = res.data.rows
    //   }
    // })
    /* this.getCourseList('boutique').then(res => {
       console.log(res, '课程')
       if (res.code === 0) {
         this.boutiqueList = res.rows
       }
     })*/
   /* api.post('https://showme2.myhope365.com/online_course/weChat/applet/subject/list', {
      enable: 1
    }).then(res => {
      console.log(res)
    })*/
    // console.log(instance, 'instance')
    // console.log(instance.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5'))
    /*    instance.post('/weChat/applet/course/list/type', {
          type: 'free',
          pageNum: 1,
          pageSize: 5
        }).then(res => {
          console.log(res, 'response')
          if (res.code === 0) {
            this.freeList = res.rows
          }
        })*/
    // 请求精品课程列表
    this.getCourseListNew1()
  }
}
</script>

<template>
  <div>
    axios
    <img class="pic" v-for="item in picList" :key="item.id" :src="item.imgUrl" alt="">
    <h1>免费课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in freeList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{ item.courseTitle }}</p>
        <p>免费</p>
      </div>
    </div>
    <h1>精品课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in boutiqueList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{ item.courseTitle }}</p>
        <p v-if="item.isFree==='1'">免费</p>
        <p v-else-if="item.isDiscount==='1'">{{ item.discountPrice }}
          <del>{{ item.coursePrice }}</del>
        </p>
        <p v-else>{{ item.coursePrice }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.pic {
  width: 200px;
}

.free {
  display: flex;
  width: 1200px;
  justify-content: space-around;

  &-item {
    width: 18%;

    img {
      width: 100%;
    }
  }
}
</style>